<!-- index -->
<template>
  <!-- <div> -->
  <el-card class="elCard" :body-style="{ padding: '15px 0 0 10px' }">
    <el-form :model="formInline" label-width="70px" :inline="true" style="display: flex;">
      <el-form-item label="工单编号" prop="taskCode" style="display: flex;">
        <el-input v-model="formInline.taskCode" clearable placeholder="请输入" />
      </el-form-item>
      <el-form-item label="工单状态" prop="status" style="display: flex;">
        <!-- <el-input v-model="formInline.taskCode" /> -->
        <el-select v-model="formInline.status" clearable placeholder="请选择">
          <el-option
            v-for="item in taskList"
            :key="item.statusId"
            :label="item.statusName"
            :value="item.statusName"
          />
        </el-select>
      </el-form-item>
      <el-form-item style="display: flex;">
        <el-button type="primary" size="medium" icon="el-icon-search" style="height: 39px" @click="searchFn">搜索</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- </div> -->
</template>

<script>
import { allTaskStatus } from '@/api'
export default {
  data() {
    return {
      formInline: {
        taskCode: '',
        status: ''
      },
      taskList: [],
      list: []
    }
  },
  async created() {
    const res = await allTaskStatus()
    this.taskList = res.data
    console.log(this.taskList)
  },
  methods: {
    async searchFn() {
      const obj = {
        ...this.formInline,
        status: this.formInline.status === '' ? null : this.taskList.filter(item => item.statusName === this.formInline.status)[0].statusId
      }
      console.log(obj)
      // this.list = res.data.currentPageRecords
      this.$emit('searchFn', obj)
    }
  }
}

</script>
<style lang='scss' scoped>
::v-deep .elCard {
  height: 100px;
  width: 1159px;
  padding: 0;
}
.el-card__body {
    padding: 0px;
}
</style>
